<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>光禽脚标机管理系统注册</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
	<meta content="Coderthemes" name="author" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />

	<!-- App favicon -->
	<link rel="shortcut icon" href="assets/images/favicon.ico">

	<!-- App css -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
	<link href="assets/css/metismenu.min.css" rel="stylesheet" type="text/css" />
	<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="assets/css/custom.css" />

	<script src="assets/js/modernizr.min.js"></script>


</head>

<body class="account-pages">

	<!-- Begin page -->
	<div class="wrapper-page account-page-full">

		<div class="card radius">
			<div class="card-block">

				<div class="account-box">

					<div class="card-box p-5">
						<h2 class="text-uppercase text-center pb-4">
							<a href="index.html" class="text-success">
								<span><img src="assets/images/logo.png" alt="" height="26"></span>
							</a>
						</h2>

						<form class="form-horizontal" action="#">

							<div class="form-group row m-b-20">
								<div class="col-12">
									<label for="loginName">用户名</label>
									<input class="form-control" type="text" name="loginName" id="loginName"
										placeholder="用户名">
									<label id="loginNameError" for="loginName" style="display: none;position: absolute;
									right: 18px;
									top: 5px;
									color: #ef392b;
									font-size: 12px;">当前用户名已存在</label>
								</div>
							</div>

							<div class="form-group row m-b-20">
								<div class="col-12">
									<label for="name">姓名</label>
									<input class="form-control" type="text" name="name" id="name" placeholder="姓名">
								</div>
							</div>

							<div class="form-group row m-b-20">
								<div class="col-12" id="phone-valid">
									<label for="phone">手机号</label>
									<input class="form-control" type="phone" id="phone" name="phone"
										placeholder="请输入手机号">
								</div>
							</div>
							<div class="form-group row m-b-20">
								<div class="col-7">
									<label for="clientCode">手机验证码</label>
									<input class="form-control" type="text" id="clientCode" name="clientCode"
										placeholder="输入5位验证码">
								</div>
								<div class="col-5">
									<label for="">&nbsp;</label>
									<button class="btn btn-block btn-success waves-effect waves-light" id="valibtn"
										type="button" onclick="sendValidCode()">发送验证码</button>
								</div>
							</div>

							<div class="form-group row m-b-20">
								<div class="col-12">
									<label for="password">密码</label>
									<input class="form-control" type="password" name="password" id="password"
										placeholder="请输入密码">
								</div>
							</div>
							<!-- <div class="form-group row m-b-20">
								<div class="col-12">
									<label for="province">省</label>
									<input class="form-control" type="province" name="province" id="province"
										placeholder="请输入省份">
								</div>
							</div>
							<div class="form-group row m-b-20">
								<div class="col-12">
									<label for="city">市</label>
									<input class="form-control" type="city" name="city" id="city" placeholder="请输入市区">
								</div>
							</div>
							<div class="form-group row m-b-20">
								<div class="col-12">
									<label for="town">区</label>
									<input class="form-control" type="town" name="town" id="town" placeholder="请输入区">
								</div>
							</div> -->


							<div class="form-group row">
								<label for="province" class="col-3 col-form-label">省份</label>
								<div class="col-9">
									<select class="form-control" id="province" name="province" title="省份"
										onchange="setCity()">
										<option selected="selected" disabled="disabled" style="display: none">
										</option>

									</select>
								</div>
							</div>
							<div class="form-group row">
								<label for="city" class="col-3 col-form-label">城市</label>
								<div class="col-9">
									<select class=" form-control" id="city" name="city" title="城市"
										onchange="setTown()">
										<option selected="selected" disabled="disabled" style="display: none">
										</option>

									</select>
								</div>
							</div>
							<div class="form-group row">
								<label for="town" class="col-3 col-form-label">区镇</label>
								<div class="col-9">
									<select class=" form-control" id="town" name="town" title="区镇">
										<option selected="selected" disabled="disabled" style="display: none">
										</option>

									</select>
								</div>
							</div>
							<div class="form-group row m-b-20">
								<div class="col-12">
									<label for="village">具体地址</label>
									<input class="form-control" type="village" name="village" id="village"
										placeholder="请输入具体地址">
								</div>
							</div>
							<div class="form-group row">
								<label for="idCardPhotoFront" class="col-x1-9 col-form-label"
									style="margin-left: 10px;">上传身份证正面</label>
								<div class="col-9">
									<input type="file" id="idCardPhotoFront" name="idCardPhotoFront">
								</div>
							</div>
							<div class="form-group row">
								<label for="idCardPhotoContrary" class="col-x1-9 col-form-label"
									style="margin-left: 10px;">上传身份证反面</label>
								<div class="col-9">
									<input type="file" id="idCardPhotoContrary" name="idCardPhotoContrary">
								</div>
							</div>
							<div class="form-group row">
								<label for="businessLicenseFront" class="col-x1-9 col-form-label"
									style="margin-left: 10px;">上传营业执照</label>
								<div class="col-9">
									<input type="file" id="businessLicenseFront" name="businessLicenseFront">
								</div>
							</div>
							<div class="form-group row">
								<label for="role" class="col-3 col-form-label">选择角色</label>
								<div class="col-9">
									<select class=" form-control" id="role" name="role" title="角色"
										onclick="display(value)">
										<option selected="selected" disabled="disabled" style="display: none" value="">
										</option>
										<option value="fadad8ca5d074824a0aab2f397b17240">农贸市场管理员</option>
										<option value="d73928f4dede4ab2b587c5b04fa38eb9">屠宰场管理员</option>
									</select>
								</div>
							</div>
							<div class="form-group row m-b-20">
								<div class="col-12 hidden">
									<label for="slaughterHouseName">屠宰场名称</label>
									<select class=" form-control" id="slaughterHouseName" name="slaughterHouseName"
										title="屠宰场名称" onchange="setMid(event)">
										<option selected="selected" disabled="disabled" style="display: none" value="">
										</option>
									</select>
								</div>
							</div>
							<div class="form-group row m-b-20">
								<div class="col-12 hidden">
									<label for="markLocation">市场名称</label>
									<select class="form-control" id="markName" name="markName" title="市场名称"
										onchange="setMid(event)">
										<option selected="selected" disabled="disabled" style="display: none" value="">
										</option>
									</select>
								</div>
							</div>
							<input class="hidden" type="text" name="mid" id="mid" value="">


							<div class="form-group row text-center m-t-10">
								<div class="col-12">
									<button class="btn btn-block btn-custom waves-effect waves-light" id="submit"
										type="submit">注册</button>
								</div>
							</div>

						</form>

						<div class="row m-t-50">
							<div class="col-sm-12 text-center">
								<p class="text-muted">已经有账号了? <a href="login.html"
										class="text-dark m-l-5"><b>登录！</b></a>
								</p>
								<p class="account-copyright">2018 © Highdmin. - Coderthemes.com</p>
							</div>

						</div>

					</div>
				</div>

			</div>
		</div>

	</div>

	<!-- jQuery  -->
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/bootstrap.bundle.min.js"></script>
	<script src="assets/js/metisMenu.min.js"></script>
	<script src="assets/js/waves.js"></script>
	<script src="assets/js/jquery.slimscroll.js"></script>

	<!-- App js -->
	<script src="assets/js/jquery.core.js"></script>
	<script src="assets/js/jquery.app.js"></script>

	<!-- 表单验证 -->
	<script src="plugins/jquery.form.js/jquery.form.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="plugins/jquery.validation.1.14.0/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
	<script src="plugins/jquery.validation.1.14.0/validate-methods.js" type="text/javascript" charset="utf-8"></script>
	<script src="plugins/jquery.validation.1.14.0/messages_zh.js" type="text/javascript" charset="utf-8"></script>
	<!-- bootstrap-select -->
	<script src="plugins/bootstrap-select/js/bootstrap-select.js" type="text/javascript" charset="utf-8"></script>

	<!-- layer插件 -->
	<script src="plugins/layer2.4/layer.js" type="text/javascript" charset="utf-8"></script>
	<!-- 星空背景 -->
	<script src="assets/js/background.js" type="text/javascript" charset="utf-8"></script>
	<script src="assets/js/custom.js" type="text/javascript" charset="utf-8"></script>
	<!-- 省市区 -->
	<script src="assets/js/province.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		var rule
		$(function () {

			//表单验证
			$("form").validate({
				rules: {
					loginName: {
						required: true,
					},
					name: {
						required: true,
					},
					clientCode: {
						required: true,
						number: true,
						maxlength: 5,
						minlength: 5,
					},
					phone: {
						required: true,
					},
					province: {
						required: true,
					},
					city: {
						required: true,
					},
					town: {
						required: true,
					},
					village: {
						required: true,
					},
					idCardPhotoFront: {
						required: true,
					},
					idCardPhotoContrary: {
						required: true,
					},
					businessLicenseFront: {
						required: true,
					},
					role: {
						required: true,
					},
				},
				onkeyup: false,
				focusCleanup: true,
				success: "valid",
				submitHandler: function (form) {
					$(form).ajaxSubmit({
						type: "POST",
						url: URL + "person/registerNewUser",
						success: function (data) {
							if (data.msg.indexOf("验证码错误") != -1) {
								parent.layer.msg('验证码失效', {
									icon: 2,
									time: 1000
								});
								return;
							}
							if (data.status == 5001) {
								parent.layer.msg('添加失败!', {
									icon: 2,
									time: 1000
								});
								return;
							}

							parent.layer.msg('注册成功！');
							setTimeout(function () {
								window.location.pathname = "login.html"
							}, 1000);

						},
						error: function (XMLHttpRequest, textStatus, errorThrown) {
							networkError(XMLHttpRequest, textStatus, errorThrown)
						}
					});
				}
			});
		});

		// 获取省市区

		setProvince()
		function setProvince() {
			for (var i = 0; i < province.length; i++) {
				var $option = `<option value="${province[i].name}" province-id="${i}" >${province[i].name}</option>`
				$('#province').append($option)
			}
		}
		function setCity() {
			var $option = '<option selected="selected" disabled="disabled" style="display: none">'
			$('#city option').remove()
			$('#town option').remove()
			$('#city').append($option)
			$('#town').append($option)

			var id = $(`#province option:selected`).attr("province-id");
			var city = province[id].city
			for (var i = 0; i < city.length; i++) {
				var $option = `<option value="${city[i].name}" city-id="${i}" >${city[i].name}</option>`
				$('#city').append($option)
			}
		}
		function setTown() {
			var $option = '<option selected="selected" disabled="disabled" style="display: none">'
			$('#town option').remove()
			$('#town').append($option)
			var pid = $(`#province option:selected`).attr("province-id");
			var cid = $(`#city option:selected`).attr("city-id");
			var town = province[pid].city[cid].area
			for (var i = 0; i < town.length; i++) {
				var $option = `<option value="${town[i]}">${town[i]}</option>`
				$('#town').append($option)
			}
		}
		// 失去焦点时触发
		$("#loginName").blur(function () {
			//查看当前用户的邮箱是否存在
			$.ajax({
				type: "POST",
				url: URL + 'person/check/username',
				async: false,
				dataType: "json",
				data: { "username": $("#loginName").val() },
				success: function (data) {
					// console.log(data);
					if (data.status === 1) {
						$("#loginNameError").css("display", "block")
						$("#submit").attr("disabled", true)
						$("#valibtn").attr("disabled", true)
					} else {
						$("#loginNameError").remove()
						$("#submit").removeAttr('disabled');
						$("#valibtn").removeAttr('disabled');
					}

				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					networkError(XMLHttpRequest, textStatus, errorThrown)
				}
			});
		})
		$("#town").blur(
			//获取所在地市场地址province, city, district
			function () {
				$.ajax({
					type: "GET",
					url: URL + '/toMarket/findMarket',
					async: false,
					dataType: "json",
					data: {
						"province": $('#province').val(),
						"city": $('#city').val(),
						"district": $('#town').val()
					},
					success: function (data) {
						if (data.object != 0) {
							data = data.object
							for (var i = 0; i < data.length; i++) {
								var $option = `<option value="${data[i].name}" data-mid="${data[i].id}" >${data[i].name}</option>`
								$('#markName').append($option)
							}
						}
						else if (data.object.length === 0) {
							// layer.confirm('此处未有可选的市场，请重新填写。', {
							// 	btn: ['确定'],
							// 	btn1: function () {
							// 		layer.closeAll()
							// 	}
							// });
						}
					},
					error: function (XMLHttpRequest, textStatus, errorThrown) {
						networkError(XMLHttpRequest, textStatus, errorThrown)
					}
				});
				$.ajax({
					type: "GET",
					url: URL + '/slaughterHouse/findByDistrict',
					async: false,
					dataType: "json",
					data: {
						"province": $('#province').val(),
						"city": $('#city').val(),
						"district": $('#town').val()
					},
					success: function (data) {
						if (data.object.length != 0) {
							data = data.object
							for (var i = 0; i < data.length; i++) {
								var $option = `<option value="${data[i].name}" data-mid="${data[i].id}" >${data[i].name}</option>`
								$('#slaughterHouseName').append($option)
							}
						}
						else if (data.object.length === 0) {
							// layer.confirm('此处未有可选的市场，请重新填写。', {
							// 	btn: ['确定'],
							// 	btn1: function () {
							// 		layer.closeAll()
							// 	}
							// });
						}
					},
					error: function (XMLHttpRequest, textStatus, errorThrown) {
						networkError(XMLHttpRequest, textStatus, errorThrown)
					}
				});
			})
		$.fn.serializeObject = function () {
			var obj = {};
			var count = 0;
			$.each(this.serializeArray(), function (i, o) {
				var n = o.name, v = o.value;
				count++;
				obj[n] = obj[n] === undefined ? v
					: $.isArray(obj[n]) ? obj[n].concat(v)
						: [obj[n], v];
			});
			//obj.nameCounts = count + "";//表单name个数
			return JSON.stringify(obj);
		};
		// 设置mid
		function setMid(e) {
			var mid = $(`#${e.srcElement.id} option:selected`).attr("data-mid"); //获取选中的项 拿到选中项的值
			$("#mid").val(mid)
			// console.log($('form').serializeObject())
		}
		function sendValidCode() {
			//发送验证码
			phone = $("#phone").val()
			if (phone == "") {
				layer.msg("请输入手机号！")
				return
			}
			$.ajax({
				type: "GET",
				url: URL + 'person/createServerCode',
				async: false,
				dataType: "json",
				data: {
					"phoneNumber": phone
				},
				success: function (data) {
					// layer.confirm('验证码：' + data.object, {
					// 	btn: ['确定'],
					// 	btn1: function () {
					// 		layer.closeAll()
					// 	}
					// });
					$("#valibtn").attr("disabled")
					var count = 60;
					const countDown = setInterval(function () {
						if (count === 0) {
							$("#valibtn").text('重新发送').removeAttr('disabled');
							clearInterval(countDown);
						} else {
							$("#valibtn").attr("disabled", true)
							$("#valibtn").text(count + '秒后可重新获取');
						}
						count--;
					}, 1000);
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					networkError(XMLHttpRequest, textStatus, errorThrown)
				}
			});
		}
		function display(value) {
			// console.log(value);
			if (value == "fadad8ca5d074824a0aab2f397b17240") {
				$('#slaughterHouseName').parent().addClass('hidden')
				// $('#slaughterHouseLocation').parent().addClass('hidden')
				$('#markName').parent().removeClass('hidden')
				$("#slaughterHouseName").rules('remove');
				// $("#slaughterHouseLocation").rules('remove');
				$("#markName").rules("add", { required: true, })
			} else {
				$('#slaughterHouseName').parent().removeClass('hidden')
				// $('#slaughterHouseLocation').parent().removeClass('hidden')
				$('#markName').parent().addClass('hidden')
				$("#slaughterHouseName").rules("add", { required: true, })
				// $("#slaughterHouseLocation").rules("add", { required: true, })
				$("#markName").rules('remove');
			}
		}
	</script>

</body>

</html>